<script setup>
import {computed, onUnmounted, ref} from 'vue';
import {ElMessage, ElImage, ElLoading} from 'element-plus';
import {Star, StarFilled, Message, Upload} from '@element-plus/icons-vue';
import {useRoute, useRouter} from "vue-router";
import api from "@/api/index.js";
import {useStore} from "vuex";
import cache from "@/utils/cacheGetter.js";

const router = useRouter()
const baseURL = api.getInstance().defaults.baseURL
const store = useStore()
const isAuthenticated = computed(() => {
  return store.getters?.isAuthenticated
})
const resourceDetail = ref({
  resourceId: null,
  imgPath: '',
  title: '',
  description: '',
  content: ``,
  categoryId: null,
});
const handleSubmit = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '上传中...'
  });
  api.post(`resource/user/add`, resourceDetail.value).then(res => {
    ElMessage.success({
      message: '发布成功',
      type: 'success',
    })
    loading.close();
    setTimeout(() => {
      router.push('/dataManager?api=resource/user/page')
    }, 1000)
  }).catch(e => {
    ElMessage.error('发布失败')
    loading.close();
  })
}

const handleImgSuccess = (res, file) => {
  console.log(res)
  resourceDetail.value.imgPath = res.url
}

const beforeImgUpload = (file) => {
  const isIMG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isIMG) {
    ElMessage.error('上传图片只能是JPG或PNG格式!')
  }
  if (!isLt5M) {
    ElMessage.error('上传图片大小不能超过 5MB!')
  }
  return isIMG && isLt5M
}

const categotyList = ref([])
const fetchCategoryList = async () => {
  const res = await api.get('category/list')
  categotyList.value = res.data
}
fetchCategoryList()
</script>

<template>
  <div class="detail-container"
       :style="{'--background-image': `url(${resourceDetail.imgPath?baseURL+'resource/download/'+resourceDetail.imgPath:'/fallback.png'})`}">
    <h2>资源上传页面</h2>
    <el-card class="resource-card">
      <el-form :model="resourceDetail">
        <el-upload
            class="resource-image"
            :action="baseURL+'resource/upload'"
            :show-file-list="false"
            :on-success="handleImgSuccess"
            :before-upload="beforeImgUpload"
        >
          <template v-if="resourceDetail.imgPath">
            <img :src="baseURL+'resource/download/'+resourceDetail.imgPath" height="100px" class="resource-image"/>
          </template>
          <div v-else>
            <el-icon class="resource-image" style="font-size: 50px">
              <Plus/>
            </el-icon>
            <h3>点+号上传图片</h3>
          </div>
        </el-upload>

        <el-row :gutter="20" class="mt-20">
          <el-col :span="24"> <!-- 修改为全宽布局 -->
            <div class="title-area">
              <h1>{{ resourceDetail.title }}</h1>
            </div>
            <div class="meta-info">
              <el-tag type="danger">分类: {{
                  resourceDetail.categoryId ? categotyList.find(item => resourceDetail.categoryId === item.categoryId)?.categoryName : '未知'
                }}
              </el-tag>
            </div>
            <el-form-item label="标题">
              <el-input type="textarea" v-model="resourceDetail.title"/>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="resourceDetail.categoryId" placeholder="请选择">
                <el-option
                    v-for="item in categotyList"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="资源描述">
              <el-input type="textarea" v-model="resourceDetail.description"/>
            </el-form-item>
            <el-form-item label="资源内容">
              <el-input type="textarea" v-model="resourceDetail.content"/>
            </el-form-item>
            <el-button type="primary" style="width: 100%;height: 50px" @click="handleSubmit">
              <h3>提交</h3>
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
:root {
  --background-image: url('/vite.svg');
}

.content {
  & :deep(pre) {
    text-align: left;
    background: #f6f8fa;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
  }

  & :deep(code) {
    text-align: left; /* 确保代码块左对齐 */
    font-family: Monaco, Consolas, monospace;
  }
}

/* 新增标题区域样式 */
.title-area {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.favorite-btn {
  font-size: 24px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-container::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-image) 50% 0;
  background-size: cover;
  filter: blur(5px);
  opacity: 0.1;
}

/* 删除原有右侧栏样式 */
.detail-container {
  position: relative;
  z-index: 0;
  padding: 50px 15%;
}

.resource-image {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

.meta-info {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.comment-item {
  margin-top: 10px;

  .comment-header {
    margin-bottom: 10px;
  }

  .user-id {
    font-weight: bold;
    margin-left: 10px;
  }
}

.comment-content {
  margin: 0;
  color: #666;
}

/* 新增内容样式 */
.content {
  line-height: 1.8;

  & :deep(img) {
    max-width: 100%;
    margin: 15px 0;
    border-radius: 6px;
  }

  & :deep(p) {
    margin: 1em 0;
  }

  & :deep(pre) {
    background: #f6f8fa;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
  }

  & :deep(code) {
    font-family: Monaco, Consolas, monospace;
  }
}

.text-right {
  text-align: right;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

/* 新增评分卡片样式 */
.rating-card {
  margin: 15px 0;
  background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.rating-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
}

.rating-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rating-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--el-color-warning);
  line-height: 1;
}

.rating-tip {
  color: #909399;
  font-size: 14px;
}

.rating-footer {
  border-top: 1px solid var(--el-border-color-light);
  padding: 12px 18px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  background: #f8f9fa;
}
</style>
